<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监视属性</title>
    <script type="application/javascript" src="../js/vue.js"></script>
</head>
<body>


<!--
深度监视:
    1.Vue中的watch默认不见时对象内部值的改变(一层);
    2.配置deep:true 可以监测对象内部值的改变(多层);
  注:
    1.Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以;
    2.使用watch时根据数据的具体结构,决定是否采用深度监视;
-->

<!--✩✩✩✩✩✩
    computed和watch的区别:
        1.computed能完成的功能,watch都可以完成;
        2.watch能完成的功能,computed不一定能完成,例如watch可以进行异步操作;
    原则:
        1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象;
        2.所有不被Vue所管理的函数(定时器的回调函数,ajax的回调函数等)最好写成箭头函数,this的指向才是vm 或  组件实例对象;
-->

<div id="app10">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
    <hr/>

    <h2>a: {{numbers.a}}</h2>
    <button @click="numbers.a++">a++</button>
</div>

<script type="application/javascript">
    Vue.config.productionTip = false    // 阻止vue在启动时生成生产提示

    const vm = new Vue({
        el: "#app10",
        data: {
            isHot: true,
            numbers: {
                a: 1,
                b: 1
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot
            }
        },
        computed: {
            info: function () {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        watch: {
            isHot: {
                immediate: true, // 初始化时让handler执行一次
                // handle在isHot变化时执行
                handler: function (newValue, oldValue) {
                    console.log('newValue=' + newValue + ',oldValue=' + oldValue)
                }
            },
            /*info: {
                immediate: true, // 初始化时让handler执行一次
                // handle在isHot变化时执行
                handler: function (newValue, oldValue) {
                    console.log('newValue=' + newValue + ',oldValue=' + oldValue)
                }
            }*/

            // 监视a的变化
            'numbers.a': {
                handler: function (newValue, oldValue) {
                    console.log('a被改变了')
                }
            },
            // 检测numbers里面任意一个属性的变化(深度监视)
            'numbers': {
                deep: true,
                handler() {
                    console.log('numbers被改变了')
                }
            }
        }
    })

    // 需要创建完对象可以监视
    /* vm.$watch('isHot', function (newValue, oldValue) {
         console.log('newValue=' + newValue + ',oldValue=' + oldValue)
     })*/

    // 完整写法
    /*vm.$watch('isHot', {
        immediate: true,
        deep: true,
        function(newValue, oldValue) {
            console.log('newValue=' + newValue + ',oldValue=' + oldValue)
        }
    })*/
</script>
</body>
</html>
